<template>
    <div class="app-container">
        <count-data />
        <!-- 已销课时，未销课时 比列图 -->
        <percent-map />
        <!-- 总收益 -->
        <total-income class="mt-30" />
        <!-- 最近半年的消课曲线图 -->
         <month-income class="mt-30" />
        <!-- 最近半年的收入曲线图 -->
        <month-course class="mt-30" />
    </div>
</template>
<script>
import countData from './components/count-data.vue'
import percentMap from './components/percent-map.vue'
import totalIncome from './components/total-income.vue'
import monthIncome from './components/month-income.vue'
import monthCourse from './components/month-course.vue'

export default {
    name: 'Dashboard',
    components: {
        countData,
        percentMap,
        totalIncome,
        monthIncome,
        monthCourse
    },
    data() {
        return {
            message: 'Hello Vue!'
        }
    }
}
</script>
<style scoped>
.app-container {
    background: #f0f0f0;
}
.map-container {
    background:#fff;
    /* background: linear-gradient(#f5f5f5, #E0FFFF); */
}
</style>
